<template>
    <div class="profile-page">
        <div class="avatar-section">
            <el-avatar :src="profile.avatar" class="clickable-avatar" @click="handleChangeAvatar" />
        </div>


        <el-form :model="profile" ref="profileForm" label-width="60px" class="profile-form">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="profile.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="profile.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="profile.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="profile.role" disabled>
                    <el-option value="管理员" label="管理员" />
                    <el-option value="用户" label="用户" />
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-tag :type="profile.status === 'active' ? 'success' : 'danger'">
                    {{ profile.status === 'active' ? '启用' : '禁用' }}
                </el-tag>
            </el-form-item>
        </el-form>

        <div class="actions">
            <el-button type="primary" @click="handleSaveProfile">保存</el-button>
            <el-button @click="resetProfile">重置</el-button>
        </div>

        <el-dialog v-model="avatarDialogVisible" title="更换头像">
            <el-upload action="/upload/avatar" :on-success="handleAvatarUploadSuccess"
                :on-error="handleAvatarUploadError" list-type="picture-card" :limit="1" accept="image/*">
                <i class="el-icon-plus"></i>
            </el-upload>
            <template #footer>
                <span class="footer-note">支持 JPG/PNG 格式，文件大小不超过 2MB</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟当前用户的个人资料
const profile = ref({
    username: '',
    email: '',
    phone: '',
    role: '',
    status: '',
    avatar: '',
});

const fetchProfileData = () => {
    //模拟通过用户身份获取用户信息
    const data = {
        username: 'John Doe',
        email: 'john@example.com',
        phone: '123-456-7890',
        role: '管理员',
        status: 'active',
        avatar: '/path/to/avatar.jpg',
    }
    profile.value = data;
}

const avatarDialogVisible = ref(false);
const profileForm = ref();

// 保存修改
const handleSaveProfile = () => {
    profileForm.value.validate(valid => {
        //模拟修改请求
        if (valid) {
            ElMessage.success('个人资料已保存');
        } else {
            ElMessage.error('请填写完整信息');
        }
    });
};

// 重置表单
const resetProfile = () => {
    profile.value.username = 'John Doe';
    profile.value.email = 'john@example.com';
    profile.value.phone = '123-456-7890';
    ElMessage.info('已重置个人资料');
    //模拟重置请求
};

// 更换头像相关逻辑
const handleChangeAvatar = () => {
    avatarDialogVisible.value = true;
};

const handleAvatarUploadSuccess = (response) => {
    profile.value.avatar = response.data.url;
    avatarDialogVisible.value = false;
    ElMessage.success('头像上传成功');
};

const handleAvatarUploadError = () => {
    ElMessage.error('头像上传失败');
};


onMounted(() => {
    fetchProfileData();
});
</script>

<style scoped lang="scss">
.profile-page {
    padding: 20px;

    .avatar-section {
        text-align: center;
        margin-bottom: 20px;

        .clickable-avatar {
            height: 80px;
            width: 80px;
            cursor: pointer;
            border: 2px solid #409eff;
            padding: 2px;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .clickable-avatar:hover {
            transform: scale(1.1);
        }

        .hint-text {
            margin-top: 10px;
            font-size: 12px;
            color: #888;
        }
    }

    .profile-form {
        max-width: 400px;
        margin: 0 auto;
    }

    .actions {
        margin-top: 20px;
        text-align: center;

        button {
            margin: 0 10px;
        }
    }
}

.footer-note {
    font-size: 12px;
    display: block;
    text-align: center;
    margin-top: 10px;
}
</style>
